﻿@using MvcApplication1.Views.Portrait

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_PortraitEditLayout.cshtml";
}


<script language="javascript">
    var hasLoadedColors = false;
    onUpdateFeatures = updateColorBar;

    function setColorBarHtml(layerTypeId, colorBarName) {
        if (layerTypeId == null) {
            $('#' + colorBarName).html("");
            return;
        }
        $.ajax({
            url: "GetColorBar?layerTypeId=" + layerTypeId,
            success: function (data) {
                $('#' + colorBarName).html(data.ColorBarHtml);
            },
            error: function (error, status, errorThrown) {
                apprise(errorThrown);
            }
        });
    }

    function updateColorBar(featureTypeId) {
        if (featureTypeId != currentFeatureTypeId || !hasLoadedColors) {
            hasLoadedColors = true;
            setColorBarHtml(featureData[featureTypeId].Layers[0], 'ColorBar');
            setColorBarHtml(featureData[featureTypeId].Layers[1], 'ColorBarSecondary');
        }
    }

    function submitSave() {
        if (featureData[4].Id == 0 || featureData[1].id == 0 || featureData[3].Id == 0 || featureData[2].Id == 0) {
            apprise('Must include Head, Eyes, Nose and Mouth in order to submit a face design.');
            return;
        }

        $('#headId').val(featureData[4].Id);
        $('#eyesId').val(featureData[1].Id);
        $('#noseId').val(featureData[2].Id);
        $('#mouthId').val(featureData[3].Id);
        $('#headColor').val(layerData[2].Color);
        $('#eyesColor').val(layerData[17].Color);
        $('#lipsColor').val(layerData[24].Color);
        $('#hairColor').val(layerData[21].Color);

        $('#frm').submit();
    }

    function changeColor(color, layerTypeId) {
        layerData[layerTypeId].Color = color;
        var layerType = layerData[layerTypeId].Name;
        $("path[layer_type='" + layerType + "']").each(function (index, value) {
            $(value).attr('style', 'fill:#' + color + ';fill-opacity:1;');
        });
        updatePortraitFeature(0, featureData[4].Id);
    }
</script>

<input id="headColor" name="headColor" type="hidden" />
<input id="eyesColor" name="eyesColor" type="hidden" />
<input id="lipsColor" name="lipsColor" type="hidden" />
<input id="hairColor" name="hairColor" type="hidden" />